<template>

    <div>
        <img v-for="(imageItem, index) in data" :key="index" :src="imageItem.img" width="100%"/>
    </div>

</template>

<script>

    export default {
        data() {
            return {
                data: []
            }
        },
        created() {


            // GET /someUrl
            /*
                this.$http.post('http://localhost:5080/BannerServlet',{content:'vue非常好'},
                {
                    emulateJSON: true
                })
                .then(response => {

                    console.log(response.body);
                    this.data = response.body;
                }, response => {
                    // error callback
                    console.log(response.body);
                });
            */

            /*
            this.$http.get('http://localhost:5080/BannerServlet',{params:{content:'vueGet也可以'}})
            .then(response => {

                console.log(response.body);
                this.data = response.body;
            }, response => {
                // error callback
                console.log(response.body);
            });
            */

            //不简写
            /*
            this.$http({
                method: 'GET',
                url: 'http://localhost:5080/BannerServlet',
                data: {content:'vueGet也可以'},
                // headers: {"X-Requested-With": "XMLHttpRequest", 'Content-Type':'application/json'},
                emulateJSON: true
            })
            .then(function (response) {//es5写法
                this.data = response.body;
            }, function (error) {
                //error
            })
            */
            /*
            this.$axios.get("http://localhost:5080/BannerServlet").then(res=>{
                console.log(res);
            }).catch(err => {
                console.log(err);
            });
            */
            // 这种方式可以看作是json的传递, 但是头部是application/x-www-form-urlencoded


            // 合并请求
            this.$axios.all([
                this.$axios.post(
                    "BannerServlet",
                    {content:'axios指南', userName:'python'},
                    {
                        headers: {
                            'content-type': 'application/x-www-form-urlencoded'
                        }
                    }
                ),
                this.$axios.get("BannerServlet")
            ]).then(this.$axios.spread(function (acct, perms) {
                // Both requests are now complete
                console.log(acct, perms);
            })).catch(err => {
                console.log(err);
            });



            /*
            this.$axios.post("http://localhost:5080/BannerServlet",
               'content=axios指南'
            ).then(res=>{
                console.log(res);
            }).catch(err => {
                console.log(err);
            });
            */
        }
    }

</script>

<style scoped>

</style>